<template>
    <div class="content">
      <el-row class="bgW">
        <el-col :span="22">
          <!--检索条件-->
          <el-form class="search" :inline="true" label-suffix="：" size="mini" :model="search">
            <el-form-item label="成交日期">
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                class="w220"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                @change="searchTime"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="客户名称" v-if="!clienId">
              <el-input
                v-model="search.consignee"
                maxlength="30"
                class="w84"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="门店名称" v-if="!clienId">
              <el-input
                v-model="search.shop_name"
                maxlength="30"
                class="w84"
                placeholder="请输入"
                clearable
              />
            </el-form-item>

           
 
          </el-form>
        </el-col>
        <el-col :span="2" style="text-align: right">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList('search')">搜索</el-button>
        </el-col>
      </el-row>
      <div class="accountCon">
        <div class="btnBox">
     
        </div>
        <!--列表-->
        <el-row>
          <el-col :span="24">
            <el-table
              :data="list"
              size="small"
              border
              :cell-style="$style.cellStyle"
              :header-cell-style="$style.rowClass"
              @selection-change="handleSelectionChange"
               v-loading="clientLoading"  element-loading-text="拼命加载中"
            >
              <ElTableColumn v-if="!userInfo.shop_id" type="selection" width="50" />
              <ElTableColumn label="门店市场" prop="market_name" />
              <ElTableColumn label="门店" prop="shop_name" />
              <ElTableColumn label="客户姓名" prop="customer_name" />
              <ElTableColumn label="业务类型" prop="business_type" />
              <ElTableColumn label="产品名称" prop="goods_name" />
              <ElTableColumn label="规格" prop="spec_name" />
              <ElTableColumn label="销售金额" prop="sales_amount" />
              <ElTableColumn label="剩余销售金额" prop="residual_sales_amount" />
              <ElTableColumn label="预存数量" prop="prestock_num" />
              <ElTableColumn label="出货数量" prop="shipment_num" />
              <ElTableColumn label="剩余数量" prop="residual_shipment_num" />
              <ElTableColumn label="存货时间" prop="create_time" />
              <ElTableColumn label="操作" fixed="right">
                <template slot-scope="{ row }">
                    <el-button type="text"  @click="tapBtn('出货明细',row)" >出退货明细</el-button>
                    <el-button type="text"  @click="tapBtn('出货',row)" >出货</el-button>
                </template>
              </ElTableColumn>
            </el-table>
            <pagination
              class="page tc mt10"
              :total="page.total"
              :page.sync="page.page"
              :limit.sync="page.limit"
              @pagination="getList"
            />
          </el-col>
        </el-row>
      </div>
      
    <!-- 出货弹框 -->
    <el-dialog title="出货" :visible.sync="dialogVisible" width="40%">
      <el-form
        ref="shipmentDetail"
        label-position="right"
        label-width="170px"
       
        :model="shipmentDetail"
        class="formBox"
      >
        <el-form-item label="出货数量:" prop="in_shop_id">
          <el-input-number v-model="shipmentDetail.num"  :min="0.01"  :step="0.01" :max="shipmentDetail.max_num" label="12321" :precision="2"></el-input-number>
        </el-form-item>
        <el-form-item label="备注:" prop="reason">
          <el-input v-model="shipmentDetail.reason" class="w300" placeholder="请填写出货备注" type="textarea" />
        </el-form-item>
        <div class="btnBox">
          <el-button type="primary" size="mini" @click="submitForm('shipmentDetail')">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>

   
    </div>
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  import pagination from "@/components/Pagination";
  import { prestockList,shipment} from "@/api/prestock";
  class shipmentDetail {
    max_num = 0;
    num = 0;
    reason = "";
    id = 0
  }
  class Rules {
    num = [{ required: true, message: "请选", trigger: "blur" }];
    reason = [{ required: true, message: "请填写备注", trigger: "blur" }];
  }
  class Page {
    total = 0;
    page = 1;
    limit = 10;
  }
  class Search {
    start_time = "";
    end_time = "";
    consignee = "";
    shop_name = "";
    low_total = "";
    large_total = "";
    business_type = "";
    order_type = "";
    display_cannel = 0;
  }
  export default {
    name: "OrderList",
    components: {
      pagination
    },
    props: {
      clienId: {
        type: String,
        default: ""
      },
      detail: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        clientLoading:true,
        shipmentDetail: new shipmentDetail(), //出货表单
        search: new Search(), // 检索条件
        page: new Page(), // 分页
        list: [], // 数据展示
        idList: "",
        value1: [],
        sum_amount: "noShow",
        is_show_add:true,
        dialogVisible: false, //出货弹框
      };
    },
    computed: {
      ...mapGetters(["userInfo"])
    },
    mounted() {
      this.getList();
    },
    methods: {
      // 获取列表
      getList(option) {
        if (option == "search") this.page = new Page();
        prestockList({
          ...this.search,
          ...this.page,
          type: 2,
          uid: this.clienId ? this.clienId : "",
          status: "-1"
        }).then(res => {
           
          this.list = res.data.list;
          this.clientLoading = false;

          this.page.total = res.data.dataCount;
          if (this.search.end_time) {
            this.sum_amount = res.sum_amount;
          } else {
            this.sum_amount = "noShow";
          }
        });
      },
      // 日期搜索
      searchTime(val) {
        if (val) {
          this.search.start_time = val[0];
          this.search.end_time = val[1];
        } else {
          this.search.start_time = "";
          this.search.end_time = "";
        }
      },
      // 
      tapBtn(type, row) {
        console.log(row,'row');
        this.shipmentDetail.num = 0;
        this.shipmentDetail.reason = "";
        switch (type) {
          case "出货":
            this.dialogVisible = true;
            this.shipmentDetail.max_num =parseFloat(row.num);
            this.shipmentDetail.id = row.id;
            break;
          case "退货":
            this.salesReturnShow = true;
            break;
          case "出货明细":
            let query = {
              id:row.id
            };
            this.$router.push(
              { name: "预存货列表明细", query: query }
            );
            break;   
        }
      },

      // 出货提交
      submitForm(formName) {
        switch(formName){
          case "shipmentDetail":
          this.hint("商品/服务出货", "shipment");
            break;
        }
      },

      // 提示
      hint(text, type,) {
        console.log(type,"type")
        this.$confirm(`${text},是否确定？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            switch (type) {
            case "shipment":
              this.shipment();
              break;
          }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      // 预存货
      shipment() {
        shipment({ ...this.shipmentDetail,}).then(res => {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.dialogVisible = false;
          this.getList();
        });
      },
      // 导出
      getExport() {
        refundExport({ id: this.idList, type: 2 }).then(res => {
          window.open(res.data.url);
        });
      },
  
      // 改变表格选中状态
      handleSelectionChange(val) {
        this.idList = val.map(i => {
          return i.id;
        });
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .accountCon {
    background: #fff;
    padding: 10px 0px 80px;
    .btnBox {
      display: flex;
      justify-content: space-between;
    }
  }
  .reveal {
    text-align: right;
    padding: 20px 0;
    .peril {
      font-weight: bold;
    }
  }
  .btnBox {
    width: 100%;
    text-align: center;
  }
  </style>
  